<template>
  <view>
    <u-tabs :list="tabs" :is-scroll="false" :current="current" @change="change" bg-color="#fbba4e" inactive-color="#fed19c"
      active-color="#fdefe6"></u-tabs>


    <view class="u-p-24">
      <view class="u-p-b-24 f-center">
        <view>距结束：</view>
        <u-count-down :timestamp="timestamp" bg-color="#000" color="#fff"></u-count-down>
      </view>
      
      <view class="card">
        <image class="pic" src="https://picsum.photos/id/133/200/200"></image>
        <view style="width: 430rpx;">
          <view class="title u-line-2">1元秒杀,限量抢购,抢完为止!XXXXXXXXXXXXXXXX...</view>
          <view class="u-p-t-12" style="width: 300rpx;">
            <u-line-progress active-color="#ff5020" :percent="70"></u-line-progress>
          </view>
          <view class="flex-row justify-between align-center u-p-t-32">
            <view class="price">
              <view>¥1</view>
              <view class="gray">¥159</view>
            </view>
            <my-btn :size="[120, 50, 24]" bg="#ff5c46" color="#fff" round inline>马上抢</my-btn>
          </view>
        </view>
      </view>

      <view class="card">
        <image class="pic" src="https://picsum.photos/id/133/200/200"></image>
        <view style="width: 430rpx;">
          <view class="title u-line-2">1元秒杀,限量抢购,抢完为止!XXXXXXXXXXXXXXXX...</view>
          <view class="u-p-t-12" style="width: 300rpx;">
            <u-line-progress active-color="#ff5020" :percent="70"></u-line-progress>
          </view>
          <view class="flex-row justify-between align-center u-p-t-32">
            <view class="price">
              <view>¥1</view>
              <view class="gray">¥159</view>
            </view>
            <my-btn :size="[120, 50, 24]" bg="#ff5c46" color="#fff" round inline>马上抢</my-btn>
          </view>
        </view>
      </view>

      <view class="card">
        <image class="pic" src="https://picsum.photos/id/133/200/200"></image>
        <view style="width: 430rpx;">
          <view class="title u-line-2">1元秒杀,限量抢购,抢完为止!XXXXXXXXXXXXXXXX...</view>
          <view class="u-p-t-12" style="width: 300rpx;">
            <u-line-progress active-color="#ff5020" :percent="70"></u-line-progress>
          </view>
          <view class="flex-row justify-between align-center u-p-t-32">
            <view class="price">
              <view>¥1</view>
              <view class="gray">¥159</view>
            </view>
            <my-btn :size="[160, 50, 24]" bg="#fbba4e" color="#fff" round inline>设置提醒</my-btn>
          </view>
        </view>
      </view>
    </view>
    
    <u-tabbar v-model="currentTab" :list="tabbar" icon-size="44" active-color="#e9b15e"></u-tabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            name: '即将售罄'
          },
          {
            name: '进行中'
          },
          {
            name: '即将开抢'
          }
        ],
        current: 0,
        tabbar: [{
            iconPath: '/static/icons/ms-xs.png',
            selectedIconPath: '/static/icons/ms-xs-on.png',
            text: '限时单品',
            customIcon: false,
          },
          {
            iconPath: '/static/icons/ms-pp.png',
            selectedIconPath: '/static/icons/ms-pp-on.png',
            text: '品牌抢购',
            customIcon: false,
          }
        ],
        currentTab: 0,
        timestamp: 86400,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">
  .u-tabbar__content__item__text {
    font-size: 20rpx !important;
    padding-top: 8rpx !important;
  }
  
  .u-countdown-time {
    padding: 4rpx !important;
  }
  
  .card {
    width: 702rpx;
    height: 260rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .pic {
      width: 198rpx;
      height: 212rpx;
      background: #E9E9E9;
      border-radius: 8rpx;
    }

    .price {
      font-size: 46rpx;
      color: #FF4500;
      display: flex;
      align-items: flex-end;
    }

    .gray {
      font-size: 24rpx;
      color: #DADADA;
      padding-left: 8rpx;
      padding-bottom: 8rpx;
      text-decoration: line-through;
    }
  }
</style>
